<template>
  <el-col :span="3" class="userNavTab">
      <!-- 侧边栏菜单区域 -->
      <div class="photo">
        <div>
          <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
          </el-avatar>
        </div>
        <!-- <p>{{$store.state.account.username}}</p> -->
        <!-- <a>admin@qq.com</a> -->
        <a>{{$store.state.account.username}}</a>
      </div>
      <!-- :default-active="$route.path" -->
      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router>
        <!-- 一级菜单 -->
        <el-menu-item index="/myinfo">
          <i class="el-icon-set-up"></i>
          <span slot="title">个人信息</span>
          <!-- <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group> -->
        </el-menu-item>
        <el-menu-item index="/mystock">
          <i class="el-icon-data-line"></i>
          <span slot="title">我的股票</span>
        </el-menu-item>
        <el-menu-item index="/admin/user" :disabled="$store.state.account.role === 'admin'?false:true">
          <i class="el-icon-user"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  } 
}
</script>

<style scoped>
.photo {
  height: 110px;
  line-height: 31px;
  padding-top: 50px;
}
.el-menu {
  border-right:0;
  height:380px;
}
.userNavTab {
  text-align:center;
  min-height:400px;
}
</style>